﻿@model smp.ButterflyCakes.Models.FormModels.Order.ComponentFlavourModel
<div class="container">
    <div class="container-fluid">
        @if (ViewBag.Error != null)
        {
            <div class="alert alert-block alert-error">
                <p>@ViewBag.Error</p>
            </div>
        }
        @Html.ValidationSummary(true)
    </div>
    <div class="form-actions">
        <span>Max number of supported flavours : <strong>@Model.NumberOfFlavours</strong></span>
    </div>
    <div class="container">
        <div id="RemoveFlavourError" class="alert alert-error hide">
            <button class="close" data-dismiss="alert" type="button">
                ×</button>
            <strong>Error</strong><p id="RemoveFlavourErrorMessage">
            </p>
        </div>
        <table id="flavours" class="table table-bordered table-hover">
            <tr>
                <th>
                    Type
                </th>
                <th colspan="2">
                    Flavour
                </th>
            </tr>
            @if (Model.Flavours.Count == 0)
            {
                <tr id="NoFlavoursRow">
                    <td colspan="2">
                        Please add a flavour
                    </td>
                </tr>
            }
            @foreach (var flavour in Model.Flavours)
            {
                <tr>
                    <td>
                        @flavour.FlavourTypeName
                    </td>
                    <td>
                        @flavour.FlavourName
                    </td>
                    <td>
                        <button class="btn btn-danger removeFlavour" type="button" flavourId="@flavour.FlavourId">
                            Remove</button>
                        <div id="removeSpinner" class="loadingimg hide" style="height: 25px">
                            <img src="@Url.Content("~/Content/images/ajax-loader.gif")" alt="Loading..."/>
                        </div>
                    </td>
                </tr>
            }
        </table>
    </div>
    <div class="form-actions">
        <button id="addAFlavour" type="button" class="btn btn-info">
            Add a flavour
        </button>
    </div>
    <div id="SaveFlavourSuccess" class="alert alert-success hide">
        <button class="close" data-dismiss="alert" type="button">
            ×</button>
        <strong>Success</strong>Flavour was added to the cake
    </div>
    <div id="AddFlavourContainer" class="container hide">
        <div id="SaveFlavourError" class="alert alert-error hide">
            <button class="close" data-dismiss="alert" type="button">
                ×</button>
            <strong>Error</strong><p id="SaveFlavourErrorMessage">
            </p>
        </div>
        <div class="control-group">
            <label class="control-label" for="FlavourType">
                FlavourType
            </label>
            @MvcHtmlString.Create(Model.SelectCakeFlavourTypes.SetElementId("FlavourType").Html)
        </div>
        <div id="flavour" class="control-group">
            <label class="control-label" for="Flavour">
                Flavour
            </label>
            <div id="flavourSelect">
            </div>
        </div>
        <div class="form-actions">
            <button id="SaveFlavour" type="submit" class="btn btn-success">
                Add Flavour</button>
            <div id="addSpinner" class="loadingimg hide" style="height: 25px">
                <img src="@Url.Content("~/Content/images/ajax-loader.gif")" alt="Loading..."/>
            </div>
        </div>
    </div>
    <form class="form-horizontal" id="editform" url="/order/CompleteCakeFlavour">
    @Html.HiddenFor(x => x.ComponentId)
    @Html.HiddenFor(x => x.OrderId)
    @Html.HiddenFor(x => x.IsCarved)
    </form>
    <div class="form-actions">
        <button id="save" type="submit" class="btn btn-success">
            Next
        </button>
        <button id="cancel" type="submit" class="btn btn-danger hide">
            Cancel
        </button>
    </div>
</div>
<script type="text/javascript">

    function HandleFailedSave(error) {
        $('#SaveFlavourErrorMessage').text(error);
        $('#SaveFlavourError').slideDown(500);
    }


    function HandleSuccessfulSave() {
        $('#SaveFlavourSuccess').slideDown(500);
        $('#NoFlavoursRow').slideUp(100);
        $('#flavours tr:last').after('<tr class=hide><td>' + $('#FlavourType option:selected').text() + '</td><td>' + $('#FlavourId option:selected').text() + '</td><td><button class="btn btn-danger removeFlavour" type="button" flavourId=' + $('#FlavourId').val() + '>Remove</button></td></tr>');
        $('#flavours tr:last').slideDown(500);
        $('#AddFlavourContainer').slideUp(250);
        RegisterLoadEvents();
        setTimeout(function () {
            $('#SaveFlavourSuccess').slideUp(500);
        }, 5000);
    }

    function AddFlavour() {
        $('#SaveFlavourError').slideUp(100);
        $('#SaveFlavourSuccess').slideUp(100);
        $('#addSpinner').fadeIn(100);

        var data = { ComponentId: $('#ComponentId').val(), FlavourTypeId: $('#FlavourType').val(), FlavourId: $('#FlavourId').val() };
        $.ajax({
            url: '/order/saveflavour',
            type: "POST",
            data: data,
            dataType: "json",
            success: function (result) {
                if (result.Success) {
                    HandleSuccessfulSave();
                } else {
                    HandleFailedSave(result.ErrorMessage);
                }
            },
            fail: function () {
                HandleFailedSave('Unable to save the flavour, please try again.');
            }
        });

        $('#addSpinner').fadeOut(100);
    }

    function LoadFlavours() {
        PostReturningHtml("/order/getcakeflavours", { FlavourTypeId: $('#FlavourType').val(), IsCarved: $('#IsCarved').val() }, $('#flavourSelect'), function () {

        });
    }

    function HandleSuccessfulRemove(el) {
        $(el).parent().parent().slideUp(250);
        $(el).parent().parent().remove();
    }

    function HandleFailedRemove(error) {
        $('#RemoveFlavourErrorMessage').text(error);
        $('#RemoveFlavourError').slideDown(500);
    }

    function RemoveFlavour(el) {

        $('#removeSpinner').fadeIn(100);
        $('#RemoveFlavourError').slideUp(100);
        var data = { ComponentId: $('#ComponentId').val(), FlavourId: $(el).attr('FlavourId') };

        $.ajax({
            url: '/order/removeflavour',
            type: "POST",
            data: data,
            dataType: "json",
            success: function (result) {
                if (result.Success) {
                    HandleSuccessfulRemove(el);
                } else {
                    HandleFailedRemove(result.ErrorMessage);
                }
            },
            fail: function () {
                HandleFailedRemove('Unable to save the flavour, please try again.');
            }
        });
        $('#removeSpinner').fadeOut(100);
    }

    function RegisterLoadEvents() {
        $('.removeFlavour').click(function (e) {
            e.preventDefault();
            RemoveFlavour(this);
        });
    }

    $(document).ready(function () {

        $('#FlavourType').change(function () {
            LoadFlavours();
        });

        $('#addAFlavour').click(function (e) {
            e.preventDefault();
            $('#AddFlavourContainer').slideDown(500);
        });

        $('#SaveFlavour').click(function (e) {
            e.preventDefault();
            AddFlavour();
        });

        RegisterLoadEvents();
    });
</script>
